<template>
	<view class="manage-container">
		<view class="header">
			<button class="add-btn" @click="addDevice">添加设备</button>
		</view>
		<view class="device-list">
			<view class="device-item" v-for="(device, index) in devices" :key="index">
				<view class="device-info">
					<text class="device-name">{{device.name}}</text>
					<text class="device-id">设备ID: {{device.id}}</text>
					<text class="device-status" :class="device.online ? 'online' : 'offline'">
						{{device.online ? '在线' : '离线'}}
					</text>
				</view>
				<view class="device-actions">
					<button class="action-btn edit" @click.stop="editDevice(device)">编辑</button>
					<button class="action-btn delete" @click.stop="deleteDevice(device)">删除</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			devices: [
				{
					id: 1,
					name: '客厅空调',
					online: true
				},
				{
					id: 2,
					name: '卧室灯',
					online: true
				}
			]
		}
	},
	methods: {
		addDevice() {
			// TODO: 实现添加设备逻辑
			uni.showToast({
				title: '添加设备功能开发中',
				icon: 'none'
			})
		},
		editDevice(device) {
			// TODO: 实现编辑设备逻辑
			console.log('编辑设备:', device)
		},
		deleteDevice(device) {
			uni.showModal({
				title: '提示',
				content: '确定要删除该设备吗？',
				success: (res) => {
					if (res.confirm) {
						// TODO: 实现删除设备逻辑
						console.log('删除设备:', device)
					}
				}
			})
		}
	}
}
</script>

<style lang="scss">
.manage-container {
	padding: 20rpx;
	
	.header {
		margin-bottom: 30rpx;
		
		.add-btn {
			background: #007AFF;
			color: #fff;
			border-radius: 45rpx;
			font-size: 28rpx;
			width: 200rpx;
		}
	}
	
	.device-list {
		.device-item {
			padding: 30rpx;
			margin-bottom: 20rpx;
			background: #fff;
			border-radius: 20rpx;
			box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
			
			.device-info {
				margin-bottom: 20rpx;
				
				.device-name {
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
					display: block;
				}
				
				.device-id {
					font-size: 24rpx;
					color: #666;
					margin-bottom: 10rpx;
					display: block;
				}
				
				.device-status {
					font-size: 24rpx;
					&.online {
						color: #07c160;
					}
					&.offline {
						color: #999;
					}
				}
			}
			
			.device-actions {
				display: flex;
				justify-content: flex-end;
				gap: 20rpx;
				
				.action-btn {
					font-size: 24rpx;
					padding: 10rpx 30rpx;
					border-radius: 30rpx;
					
					&.edit {
						background: #007AFF;
						color: #fff;
					}
					
					&.delete {
						background: #ff4d4f;
						color: #fff;
					}
				}
			}
		}
	}
}
</style> 